<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"     
      xmlns:p="http://primefaces.prime.com.tr/ui" 
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!--
    
    les scripts javascript sont dans le template
    -->

    <script type="text/javascript">  
            function handleLoginRequest(xhr, status, args) {  
                if(args.validationFailed || !args.loggedIn) {  
                    jQuery('#dialog').parent().effect("shake", { times:3 }, 100);  
                } else {  
                    dlg.hide();  
                    jQuery('#loginLink').fadeOut();  
                }  
            }
    </script> 

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />

        <link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" />
        <title>mp3-Rumble Template</title>
    </h:head>

    <h:body>
        <div style="height:0">
            <!-- debut code login -->

            <p:growl id="growl" showDetail="true" life="1000" />  

            <p:dialog id="dialog" header="Login" widgetVar="dlg" width="300">  
                <h:form>
                    <h:panelGrid columns="2" cellpadding="5">  
                        <h:outputLabel for="username" value="Username:" />
                        <p:inputText value="#{userManagedBean.username}"
                                     id="username" required="true" label="username" />  

                        <h:outputLabel for="password" value="Password:" />  
                        <h:inputSecret value="#{userManagedBean.password}"   
                                       id="password" required="true" label="password" />  

                        <f:facet name="footer">
                            <p:commandButton value="Login" update="growl"   
                                             actionListener="#{userManagedBean.login}"   
                                             oncomplete="handleLoginRequest(xhr, status, args)"/>  
                        </f:facet>
                    </h:panelGrid>
                </h:form>
            </p:dialog>

            <!-- fin code login -->

        </div>

        <div id="top" class="top">
            <ui:insert name="top">

                <img src="./resources/img/logoMp3Rumble.png" alt="MP3 Rumble" width="111" height="55" />   

                <!-- <audio src="http://noctanvol.free.fr/musique/mass%20effect%20-%20vigil.mp3" controls="preloads" ></audio>  -->

                <h:commandButton type="submit" id="loginLink" value="Login" onclick="dlg.show()" title="login"></h:commandButton>
                <h:commandButton type="submit" value="Logout" action="compte.xhtml"></h:commandButton>
                <h:outputText value="#{userManagedBean.userName}"/>

             <!--   <h:outputLabel value="you logged in as, " /> -->

            </ui:insert>
        </div>

        <div>
            <div id="left" style="width: 150px">
                <ui:insert name="left">
                    
                    <h:form>
                        <p:menu type="tiered" style="width:140px">
                            <p:menuitem value="Accueil" url="home.xhtml"/>
                            <p:submenu label="Comptes">
                                <p:menuitem value="  Créer un compte" url="CreerCompte.xhtml"/>
                               <!-- <p:menuitem value="  afficher un compte" url="compte.xhtml"/> 
                                <p:menuitem value="  Lister les comptes" url="listeComptes.xhtml"/> -->
                                <p:submenu label="Playlist">
                                    <p:menuitem value="Afficher/gerer les playlist" url="selectPlaylist.xhtml"/>
                                    <p:menuitem value="Créer une playlist" url="createNewPl.xhtml"/>
                                </p:submenu>
                            </p:submenu>
                            <p:submenu label="Mediatheque">
                                <p:menuitem value="Afficher/rechercher Mediatheque" url="bibliotheque.xhtml"/>
                                <p:menuitem value="Afficher par Artiste" url="artisteListeDetails.xhtml"/>
                                <p:menuitem value="Afficher par album" url="albumDetails.xhtml"/>
                            </p:submenu>
                            <p:menuitem value="  player de test FTP" url="Player.xhtml"/>
                        </p:menu>
                    </h:form>    
                </ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">
                    </ui:insert>
            </div>
        </div>
    </h:body>
</html>
